@use '../../variables';
@use '../../../../styles/mixins';

$block: '.#{variables.$ns}lab-list-item-view';

/* ListItemView CSS API
    --g-list-item-view-min-height
    --g-list-item-view-border-radius
    --g-list-item-view-padding-inline
    --g-list-item-view-padding-block
    --g-list-item-view-line-height
    --g-list-item-view-controls-gap
    --g-list-item-view-controls-size
    --g-list-item-view-controls-border-radius
    --g-list-item-view-controls-icon-size
    --g-list-item-view-spacer-size
    --g-list-item-view-background-color
    --g-list-item-view-background-color-hover
    --g-list-item-view-text-color
    --g-list-item-view-description-color
*/
#{$block} {
    /* Sizes */
    --_--min-height: var(--g-list-item-view-min-height, 28px);
    --_--border-radius: var(--g-list-item-view-border-radius, var(--g-border-radius-m));
    --_--padding-inline: var(--g-list-item-view-padding-inline, var(--g-spacing-2));
    --_--padding-block: var(--g-list-item-view-padding-block, var(--g-spacing-1));
    --_--line-height: var(--g-list-item-view-line-height, 18px);

    --_--controls-gap: var(--g-list-item-view-controls-gap, var(--g-spacing-1));
    --_--controls-size: var(--g-list-item-view-controls-size, 20px);
    --_--controls-border-radius: var(
        --g-list-item-view-controls-border-radius,
        var(--g-border-radius-s)
    );
    --_--controls-icon-size: var(--g-list-item-view-controls-icon-size, 16px);

    --_--spacer-size: var(--g-list-item-view-spacer-size, var(--_--controls-size));

    /* Colors */
    --_--background-color: var(--g-list-item-view-background-color, var(--g-color-base-fill));
    --_--background-color-hover: var(
        --g-list-item-view-background-color-hover,
        var(--g-color-base-simple-hover)
    );
    --_--background-color-disabled: var(
        --g-list-item-view-background-color,
        var(--g-color-base-fill)
    );
    --_--background-color-active: var(
        --g-list-item-view-background-color,
        var(--g-color-base-generic-medium)
    );
    --_--background-color-selected: var(
        --g-list-item-view-background-color,
        var(--g-color-base-selection)
    );
    --_--background-color-selected-hover: var(
        --g-list-item-view-background-color-hover,
        var(--g-color-base-selection-hover)
    );
    --_--text-color: var(--g-list-item-view-text-color, var(--g-color-text-primary));
    --_--text-color-disabled: var(--g-list-item-view-text-color, var(--g-color-text-hint));
    --_--description-color: var(
        --g-list-item-view-description-color,
        var(--g-color-text-secondary)
    );
    --_--nested-level: 0;
}

#{$block} {
    @include mixins.button-reset();
    @include mixins.link-reset();

    display: grid;
    box-sizing: border-box;
    grid-template:
        'drag-handle spacer collapsed-toggle checked start-content content     end-content' 1fr
        'drag-handle spacer collapsed-toggle checked start-content description end-content' auto
        / auto auto auto auto auto 1fr auto;
    align-items: center;
    min-height: calc(var(--_--min-height) + var(--_--description-min-height, 0px));
    border-radius: var(--_--border-radius);
    background: var(--_--background-color);
    color: var(--_--text-color);

    width: 100%;
    padding-inline: var(--_--padding-inline);
    padding-block: var(--_--padding-block);
    outline: none;

    @include mixins.text-body-1;

    &_has-description {
        --_--description-min-height: 16px;
    }

    &__slot {
        &:not(&_name_spacer) + &:not(&_name_description, &_name_spacer),
        &:not(&_name_spacer) + & + &_name_description {
            margin-inline-start: var(--_--controls-gap);
        }

        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--_--controls-gap);
        margin-block: calc(-1 * var(--_--padding-block));

        &_name {
            &_drag-handle {
                grid-area: drag-handle;
                --g-button-height: var(--_--controls-size);
                --g-button-border-radius: var(--_--controls-border-radius);
                --g-button-background-color-hover: transparent;
            }

            &_spacer {
                grid-area: spacer;
                width: calc(var(--_--spacer-size) * var(--_--nested-level));
                height: var(--_--controls-size);
            }

            &_collapsed-toggle {
                grid-area: collapsed-toggle;
                --g-button-height: var(--_--controls-size);
                --g-button-border-radius: var(--_--controls-border-radius);
                --g-button-background-color-hover: transparent;
            }

            &_checked {
                grid-area: checked;
            }

            &_start-content {
                grid-area: start-content;
                height: 100%;
            }

            &_content {
                grid-area: content;
                justify-content: flex-start;
                overflow: hidden;
                min-width: 3ch;
                line-height: var(--_--line-height);
                margin-block: 0;
            }

            &_description {
                grid-area: description;
                justify-content: flex-start;
                overflow: hidden;
                min-width: 3ch;
                color: var(--_--description-color);
                line-height: var(--_--line-height);
                margin-block: 0;
            }

            &_end-content {
                grid-area: end-content;
                height: 100%;
            }

            &_container {
                grid-row: 1 / -1;
                grid-column: 1 / -1;
            }
        }
    }

    &_size {
        &_s {
            --_--min-height: 24px;
            --_--border-radius: var(--g-border-radius-s);
            --_--padding-inline: var(--g-spacing-2);
            --_--padding-block: var(--g-spacing-half);

            --_--controls-gap: var(--g-spacing-2);
            --_--controls-size: 20px;
            --_--controls-border-radius: var(--g-border-radius-xs);
            --_--controls-icon-size: 12px;
        }

        &_m {
            --_--min-height: 28px;
            --_--border-radius: var(--g-border-radius-m);
            --_--padding-inline: var(--g-spacing-2);
            --_--padding-block: var(--g-spacing-1);

            --_--controls-gap: var(--g-spacing-2);
            --_--controls-size: 24px;
            --_--controls-border-radius: var(--g-border-radius-s);
            --_--controls-icon-size: 16px;
        }

        &_l {
            --_--min-height: 32px;
            --_--border-radius: var(--g-border-radius-l);
            --_--padding-inline: var(--g-spacing-2);
            --_--padding-block: var(--g-spacing-2);
            --_--controls-gap: var(--g-spacing-2);
            --_--controls-size: 24px;
            --_--controls-border-radius: var(--g-border-radius-m);
            --_--controls-icon-size: 16px;
        }

        &_xl {
            --_--min-height: 36px;
            --_--border-radius: var(--g-border-radius-xl);
            --_--padding-inline: var(--g-spacing-2);
            --_--padding-block: var(--g-spacing-3);

            --_--controls-gap: var(--g-spacing-2);
            --_--controls-size: 24px;
            --_--controls-border-radius: var(--g-border-radius-l);
            --_--controls-icon-size: 16px;

            @include mixins.text-body-2;
        }
    }

    &_is-container {
        display: block;
        --_--padding-inline: 0;
        --_--padding-block: 0;
    }

    &:focus {
        --_--background-color: var(--_--background-color-hover);
    }

    &:not(&_hovered_no):hover,
    &_hovered_yes {
        --_--background-color: var(--_--background-color-hover);
    }

    &_active {
        --_--background-color: var(--_--background-color-hover);
        --_--background-color-hover: var(--_--background-color-active);
    }

    &_selected {
        --_--background-color: var(--_--background-color-selected);
        --_--background-color-hover: var(--_--background-color-selected-hover);
    }

    &_disabled {
        pointer-events: none;

        &,
        &:hover,
        &:focus {
            --_--background-color: var(--_--background-color-disabled);
            --_--text-color: var(--_--text-color-disabled);
            --_--description-color: var(--_--text-color-disabled);
            outline: none;
        }
    }

    &__arrow {
        &_direction {
            &_bottom {
                transform: rotate(0);
            }
            &_top {
                transform: rotate(-180deg);
            }
        }
    }

    &__checked {
        display: flex;
        justify-content: center;
        align-items: center;

        width: var(--_--controls-size);
        height: var(--_--controls-size);
        color: var(--g-color-base-brand);
    }

    &__icon {
        width: var(--_--controls-icon-size);
        height: var(--_--controls-icon-size);
    }
}
